<template>
	<view class="page">
		<view class="profile">
			<view class="thead">
				<view class="avatar">
					<image :src="teamData.headimg" mode=""></image>
				</view>
				<view class="name">
					<text>{{teamData.tel}}</text>
				</view>
				<view class="level" v-if="false">
					<image v-for="(item, index) in teamData.icons" :key="index" :src="item" mode="widthFix"></image>
				</view>
				<view v-if="false" class="notice" @click="openGuiZe">
					<image src="https://wx.2024csnl.com/static/u0514/u0514-1.png" mode=""></image>
					<text>数据解读</text>
				</view>
			</view>
			<view class="tbody">
				<view class="flex">
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.yqcode}}</text>
							<text>分享码</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.total_amount}}</text>
							<text>销售业绩</text>
						</view>
					</view>
					<view class="item">
						<view class="cell">
							<text>{{teamData.zt_teamcount}}</text>
							<text>朋友</text>
						</view>
					</view>
					<view class="item">
						<view class="cell">
							<text>{{teamData.team_teamcount}}</text>
							<text>我的社区</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.ztbs_qty}}</text>
							<text>商家</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.business_count}}</text>
							<text>累计入驻商家</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.bs_total_amount}}</text>
							<text>商家总业绩</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.ztfws_count}}</text>
							<text>合作服务商</text>
						</view>
					</view>
					<view class="item" v-if="false">
						<view class="cell">
							<text>{{teamData.sapp_count}}</text>
							<text>SAPP服务商</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="friends">
			<view class="friends-thead" v-if="false">
				<view class="sort">
					<view class="pt" @click="showDp">
						<text>{{ filter.sortLabel }}</text>
						<image src="https://wx.2024csnl.com/static/u0514/u0514-3.png" mode="aspectFit"></image>
					</view>
					<view v-if="isShowDp" class="dp">
						<view v-for="(item, index) in sorts" :key="index" class="it" @click="changeSort(item)">
							<text>{{ item.label }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="friends-tbody">
				<view class="list">
					<view v-for="(item, index) in list" :key="index" class="item">
						<view class="cell">
							<view class="thead">
								<view class="avatar">
									<image :src="item.headimg" mode=""></image>
								</view>
								<view class="title">
									<view class="name" @click="handleCopy(item.mobile)" style="flex: 1;">
										<text>{{ item.phone }}</text>
										<image src="https://wx.2024csnl.com/static/u0514/u0514-2.png" mode=""></image>
									</view>
									<view class="dis">
										<text>注册时间：{{item.regtime}}</text>
									</view>
								</view>
								<view v-if="false" class="title" style="margin-top: 10rpx;">
									<view class="level">
										<view class="pr">
											<text :style="{width: `${item.vlevel * 20}%`}"></text>
										</view>
										<view class="fd">
											<text :class="[`${ item.vlevel == 1 ? 'r' : '' }`]">VIP</text>
											<text :class="[`${ item.vlevel == 2 ? 'r' : '' }`]">V1</text>
											<text :class="[`${ item.vlevel == 3 ? 'r' : '' }`]">V2</text>
											<text :class="[`${ item.vlevel == 4 ? 'r' : '' }`]">V3</text>
											<text :class="[`${ item.vlevel == 5 ? 'r' : '' }`]">V4</text>
										</view>
									</view>
								</view>
								<view class="uid">
									<text>ID：{{item.id}}</text>
								</view>
							</view>
							<view class="tbody"  v-if="false">
								<view v-if="false" class="rows">
									<view class="it">
										<text>{{item.paycount}}</text>
										<text>今日消费活跃度</text>
									</view>
									<view class="it">
										<text>{{item.team_amount}}</text>
										<text>消费业绩</text>
									</view>
								</view>
								<view class="rows">
									<view class="it">
										<text>{{item.teamcount}}</text>
										<text>我的粉丝</text>
									</view>
									<view class="it">
										<text>{{item.total_payamount}}</text>
										<text>个人消费</text>
									</view>
									<view class="it">
										<text>{{item.business_count}}</text>
										<text>入驻商家数量</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flex-center addressImgBox" v-if="list.length==0">
					<image src="https://wx.2024csnl.com/static/noData.png"></image>
					{{emptyText}}
				</view>

				<view style="height: 10px;"></view>
			</view>
		</view>

		<lottery-dialog v-if="dialogVisible" :title="`数据解读`" :content="remark" @callback="dialogCallback">
		</lottery-dialog>
	</view>
</template>

<script>
	import {
		getMyTeam
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				dialogVisible: false,
				remark: '',
				emptyText: '数据加载中~',
				sorts: [{
						key: 1,
						label: '按注册时间排序'
					},
					{
						key: 2,
						label: '按业绩排序'
					},
					{
						key: 3,
						label: '按粉丝人数排序'
					}
				],
				filter: {
					sort: 1,
					sortLabel: '按注册时间排序'
				},
				isShowDp: false,
				teamData: {},
				all_teamcount: '-',
				total_amount: '-',
				zt_teamcount: '-',
				team_teamcount: '-',
				business_count: '-',
				list: [],
				noMoreData: false,
				pagenum: 1,
			}
		},
		onLoad() {
			this.onGetMyTeamData()
			this.onGetMyZTTeamList()
		},
		onReachBottom() {
			this.pagenum += 1
			this.onGetMyZTTeamList('bottom')
		},
		methods: {

			openGuiZe() {
				this.dialogVisible = true
			},
			dialogCallback() {

				this.dialogVisible = false
			},
			// 切换排序
			changeSort(obj) {
				this.filter.sort = obj.key
				this.filter.sortLabel = obj.label
				this.isShowDp = false
				this.pagenum = 1
				this.onGetMyZTTeamList()
			},
			// 显示排序
			showDp() {
				this.isShowDp = !this.isShowDp
			},
			// 拷贝
			handleCopy(text) {
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			// 拨打电话
			handleCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			async onGetMyTeamData() {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamdata', {})
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.teamData = data;
					this.remark = data.remark;
					this.all_teamcount = data.all_teamcount;
					this.total_amount = data.total_amount;
					this.zt_teamcount = data.zt_teamcount;
					this.team_teamcount = data.team_teamcount;
					this.business_count = data.business_count;
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyZTTeamList(type) {
				this.emptyText = '数据加载中~'
				console.log({
					pagenum: this.pagenum,
					sorttype: this.filter.sort
				})
				const res = await getMyTeam('s=/ApiZwyRequest/myztteamlist', {
					pagenum: this.pagenum,
					sorttype: this.filter.sort
				})

				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
					this.emptyText = '暂无数据~'
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamList(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamlist', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamXs(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/myteamxs', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			async onGetMyTeamBusineXs(type) {
				const res = await getMyTeam('s=/ApiZwyRequest/mybusinessxs', {
					pagenum: this.pagenum
				})
				const {
					datalist,
					status,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...datalist) : this.list = datalist
					this.pagenum != 1 && datalist.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		background: #f8f8f8;
	}
	.profile {
		background: #fff;
		padding: 40rpx 0;
		position: relative;
		.thead {
			position: relative;
			text-align: center;
			.avatar {
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					border: 4rpx solid #eee;
				}
			}
			.name {
				line-height: 80rpx;
				text {
					font-size: 44rpx;
					font-weight: bold;
				}
			}
		}
		.tbody {
			position: relative;
			text-align: center;
			margin: 20rpx 0 0;
			.flex {}
			.item {
				flex: 1;
			}
			.cell {
				text {
					display: block;
					line-height: 60rpx;
					font-size: 36rpx;
					color: #999;
					&:nth-child(1) {
						font-weight: bold;
						font-size: 44rpx;
						color: #000;
					}
				}
			}
		}
	}
	
	.friends {
		margin-top: 20rpx;
		background: #fff;
		&-tbody {
			.list {}
			.item {
				padding: 0 20rpx;
			}
			.cell {
				padding: 40rpx 0;
				border-top: 1px solid #eee;
				
			}
			.thead {
				display: flex;
				align-items: center;
				.avatar {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}
				.title {
					flex: 1;
					margin: 0 20rpx;
				}
				.name {
					display: flex;
					align-items: center;
					line-height: 40rpx;
					text {
						font-size: 30rpx;
						font-weight: bold;
						color: #000;
					}
					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
				.dis {
					line-height: 40rpx;
					margin-top: 10rpx;
					color: #999;
				}
				.uid {
					width: 200rpx;
					text-align: right;
					line-height: 40rpx;
					color: #999;
				}
			}
			.tbody {}
		}
	}
</style>